// 手指按下的坐标
var startX = 0;
var startY = 0;

// 手指在canvas移动的坐标
var moveX = 0;
var moveY = 0;

// 移动位置跟开始位置的差值
var X = 0;
var Y = 0;

// 单节身体的长宽
var unitWidth = 20;

// 蛇头的对象
var snakeHead = {
    x: 0,
    y: 0,
    color: '#ff0000',
    w: 20,
    h: 20
}

// 身体的对象(数组) 
var snakeBodys = [];

// 食物的对象(数组)
var foods = [];

// 窗口的宽高
var windowW = 0;
var windowH = 0;

// 用于确定是否删除
var collideBol = true;

// 手指移动的方向方向
var direction = null;

// 蛇移动的方向
var snakeDirection = 'right';

Page({
    canvasStart: function (e) {
        startX = e.touches[0].x;
        startY = e.touches[0].y;
    },
    canvasMove: function (e) {
        moveX = e.touches[0].x;
        moveY = e.touches[0].y;

        X = moveX - startX;
        Y = moveY - startY;

        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            console.log('right');
            direction = 'right';
        } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            console.log('left');
            direction = 'left';
        } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            console.log('down');
            direction = 'down';
        } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            console.log('top');
            direction = 'top';
        }
    },
    canvasEnd: function (e) {
        snakeDirection = direction;
    },
    onReady: function () {
        // 获取画布上下文
        var context = wx.createContext();

        // 帧数
        var frameNum = 0;

        // 绘制函数
        function draw(obj) {
            context.setFillStyle(obj.color);
            context.beginPath();
            context.rect(obj.x, obj.y, obj.w, obj.h);
            context.closePath();
            context.fill();
        }

        // 碰撞函数
        function collide(obj1, obj2) {
            var l1 = obj1.x;
            var r1 = l1 + obj1.w;
            var t1 = obj1.y;
            var b1 = t1 + obj1.h;

            var l2 = obj2.x;
            var r2 = l2 + obj2.w;
            var t2 = obj2.y;
            var b2 = t2 + obj2.h;

            if (r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {
                return true;
            } else {
                return false;
            }
        }

        function animate() {

            frameNum++;
            if (frameNum % 20 == 0) {

                // 向蛇身体添加一个最新的位置
                snakeBodys.push({
                    x: snakeHead.x,
                    y: snakeHead.y,
                    w: 20,
                    h: 20,
                    color: '#00ff00' // 绿色
                });

                switch (snakeDirection) {
                    case 'left':
                        snakeHead.x -= snakeHead.w;;
                        break;
                    case 'right':
                        snakeHead.x += snakeHead.w;
                        break;
                    case 'top':
                        snakeHead.y -= snakeHead.h;
                        break;
                    case 'down':
                        snakeHead.y += snakeHead.h;
                        break;
                }

                if (snakeBodys.length > 4) {
                    if (collideBol) {
                        // 移除不用的身体
                        snakeBodys.shift();
                    } else {
                        collideBol = true;
                    }
                }
            }


            // 绘制蛇头
            draw(snakeHead);

            // 绘制蛇身
            for (var i = 0; i < snakeBodys.length; i++) {
                var snakeBody = snakeBodys[i];
                draw(snakeBody);
            }

            // 绘制食物
            for (var i = 0; i < foods.length; i++) {
                var foodObj = foods[i];
                draw(foodObj);

                if (collide(snakeHead, foodObj)) {
                    console.log('撞上了');
                    collideBol = false;
                    foodObj.reset();
                }
            }

            wx.drawCanvas({
                canvasId: 'snakeCanvas',
                actions: context.getActions()
            });

            requestAnimationFrame(animate);
        }

        // 随机函数
        function rand(min, max) {
            return parseInt(Math.random() * (max - min));
        }

        // 构造食物对象
        function Food() {
            this.x = rand(0, windowW - 20);
            this.y = rand(0, windowH - 20);
            var w = rand(10, 30);
            this.w = w;
            this.h = w;
            this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
            this.reset = function () {
                this.x = rand(0, windowW - 20);
                this.y = rand(0, windowH - 20);
                this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
            }
        }

        // 获取系统信息
        wx.getSystemInfo({
            success: function (res) {
                windowW = res.windowWidth;
                windowH = res.windowHeight;
                console.log(windowW);
                console.log(windowH);
                for (var i = 0; i < 20; i++) {
                    var foodObj = new Food();
                    foods.push(foodObj);
                }
                console.log(foods);
                animate();
            }
        })
    },
})
